yubo 个人技术博客

获取窗口属性

查看滚动条的滚动距离（IE8及IE8以下不兼容）

window.pageXOffset  // 获取 X 轴滚动条
window.pageYOffset  // 获取 Y 轴滚动条

// IE: 
document.body.scrollLeft + document.documentElement.scrollLeft  // 获取 X 轴滚动条
document.body.scrollTop + document.documentElement.scrollTop  // 获取 Y 轴滚动条

兼容性混乱问题，用时取两个值相加，因为不可能存在两个同时有值

封装一个兼容性 getScrollOffset()方法，求滚动轮滚动距离

function getScrollOffset () {
    if (window.pageXOffset) {
        return {
            x : window.pageXOffset,
            y : window.pageYOffset 
        }
    } else {
        return {
            x : document.body.scrollLeft + document.documentElement.scrollLeft,
            y : document.body.scrollTop + document.documentElement.scrollTop
        }
    }
}

查看可视区窗口大小（IE8及IE8以下不兼容）

window.innerWidth  // 获取可视区 X 轴
window.innerHeight  // 获取可视区 Y 轴
// IE:
document.documentElement.clientWidth  // 获取可视区 X 轴 (标准模式下，任意浏览器都兼容)
document.documentElement.clientHeight  // 获取可视区 Y 轴
document.body.clientWidth  // 获取可视区 X 轴 (兼容怪异/混杂模式浏览器)
document.body.clientHeight  // 获取可视区 Y 轴

封装兼容性 getViewportOffset()方法，返回浏览器视口尺寸

function getViewportOffset () {
    if (window.innerWidth) {
        return {
            x : window.innerWidth,
            y : window.innerHeight
        }
    } else {
        if (document.compatMode === "BackCompt") {  // 判断是否为混杂模式
            return {
                x : document.body.clientWidth,
                y : document.body.clientHeight
            }
        } else {
            return {
                x : document.documentElement.clientWidth,
                y : document.documentElement.clientHeight
            }
        }
    }
}

domEle.getBoundingClientRect();

• 查看元素的几何尺寸(兼容性很好)
• 该方法返回一个对象，对象里面有left,top,right,bottom等属性。left和top代表该元素左上角的X和Y坐标，right和bottom代表元素右下角的X和Y坐标
• height和width属性老版本 IE 不支持
• 返回的结果并不是“实时的”

<div type="width:100px;height:100px;background:#f00;padding:100px"></div>
<script>
    var div = document.getElementsByTagName('div')[0];
</script>

查看元素的尺寸

• div.offsetWidth —— 100
• div.offsetHeight —— 100

查看元素的位置 (返回相对于父级进行定位)

• div.offsetLeft —— 100
• div.offsetTop —— 100

查看有父级的定位

• div.offsetParent 返回最近的有定位的父级

求元素相对于文档的坐标

• div.clientHeight 可见区域高度
• div.clientWidth

使滚动条滚动

• window.scroll(x, y); 滚动到 x, y 坐标
• window.scrollTo(x, y); 滚动到 x, y 坐标
• window.scrollBy(x, y); 不断累加 x, y 坐标

编辑页面内容（调试用）

document.body.contentEditable = true